<template>
  <div id="app">
    <el-container>
      <el-header height="66px">
        <Header v-if="$route.path != '/login'" />
      </el-header>
      <transition name="router" mode="out-in">
        <router-view v-if="isShow"></router-view>
      </transition>
    </el-container>
    <el-backtop target="#app"></el-backtop>

    <!-- 确认购买组件 -->
    <ComfirmBuy />
  </div>
</template>

<script>
// import Web3 from "web3";
import { getMatemask } from "@/utils/matemask";
import Header from "@/components/Header";
import ComfirmBuy from "@/components/ComfirmBuy";
import { Loading } from "element-ui";
export default {
  name: "App",
  components: { Header, ComfirmBuy },
  created() {
    window.loadMetamask = Loading;
    window.linkToLogin = this.linkToLogin;
  },
  mounted() {
    // 链接matemask
    // getMatemask()
    // .catch(err=>{
    //   console.log('app error :',err)
    //   // 跳转到引导页面
    //   this.$router.push('/guide')
    // })
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    linkToLogin(msg) {
      this.$message({
        message: msg,
        type: "warning",
        customClass: "el-message-custom",
      });
      // this.$store.dispatch("showLogin", true);
      // console.log("linkToLogin");
      // this.reload();
      this.$router.push("/login");
    },
    async reload() {
      this.isShow = false;
      await this.$nextTick();
      this.isShow = true;
    },
  },
};
</script>

<style lang='less'>
// 路由切换动画
.router-enter,
.router-leave-to {
  opacity: 0;
}
.router-enter-active,
.router-leave-active {
  transition: all 0.2s ease;
}
#app {
  height: 100vh;
  overflow: scroll;
}

// 分页样式
.pagination {
  display: flex;
  justify-content: center;
}
.no-result {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}
</style>